<template>
  <div class="content">
    <!-- <Chart :option="chartOption" style="height: 400px" /> -->
    <div class="left">
      <div class="left_top">
        <a-tabs  default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="新增信息上报列表">
          <div 
          style="background:red;height:100%"
          > 
              <a-table 
              :scroll="{y:440}"
              :pagination="false" :columns="columns" :data-source="data">
              <a slot="name" slot-scope="text">{{ text }}</a>
              </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="新增情报信息列表" force-render>
           2
        </a-tab-pane>
        <a-tab-pane key="3" tab="新增矛盾纠纷列表">
          Content of Tab Pane 3
        </a-tab-pane>
      </a-tabs>
      </div>
      <div class="left_bottom">
        <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="最新新闻">
         <a-list  item-layout="vertical" size="large"  :data-source="listData">
            <!-- <div slot="footer"><b>ant design vue</b> footer part</div> -->
            <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
              <template v-for="{ type, text,text_type } in actions" slot="actions">
                <span :key="type">
                  <a-icon :type="type" style="margin-right: 8px" />
                  {{text_type}}{{ text }}
                </span>
              </template>
              <img
                slot="extra"
                width="172"
                alt="logo"
                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
              />
              <a-list-item-meta :description="item.description">
                <a slot="title" :href="item.href">{{ item.title }}</a>
                <a-avatar slot="avatar" :src="item.avatar" />
              </a-list-item-meta>
              <!-- {{ item.content }} -->
            </a-list-item>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="2" tab="最新通知通告" force-render>
          Content of Tab Pane 2
        </a-tab-pane>
      </a-tabs>
      </div>
    </div>
    <div class="right">
          <div>
            <div class="title">最新标准地址列表</div>
            <div>
                 <a-table 
              :scroll="{y:220}"
              :pagination="false" :columns="columns_adress" :data-source="data">
              <a slot="name" slot-scope="text">{{ text }}</a>
              </a-table>
            </div>
          </div>
          <div style="margin-top:16px">
            <div class="title">最新留言</div>
              <tr class="message" v-for="index in 3">
                <td class="img"><img  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt=""></td>
                <td class="message_contents">
                  <div class="header">这里的标题很长这里的标题很长这里的标题很长这里的标题很长这里的标题很长</div>
                  <div class="message_content">这里的正文很长正文这里的正文很长正文这里的正文很长正文这里的正文很长正文这里的正文很长正文这里的正文很长正文</div>
                </td>
                <td class="reply"><a-icon type="edit" /> 回复</td>
              </tr>
          </div>
          <div style="margin-top:16px;">
            <div class="title">最新义警任务</div>
             <div class="vigilantes">
               <div v-for="item in 2" class="vigilantes_item">
                 <div class="unit_jf">
                   <div class="unit">万达广场</div>
                   <div class="jf"><a-icon style="color:rgb(240, 185, 79);" type="account-book" />积分：2</div>
                 </div>
                 <div class="person_tel">
                   <div class="img">1</div>
                   <div class="person">
                     <div>李世斌</div>
                     <div>13156895536</div>
                   </div>
                 </div>
                 <div class="vi_time">2021/03/18 (18:00 - 20:00)</div>
                 <div class="vi_content">针对小区的安全问题进行固定路线巡逻,上午和下午要进行巡逻,现在</div>
               </div>
            </div>
          </div>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request";
import Chart from "../../components/Chart";
export default {
  data() {
    const columns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 80,
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state 1',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'state 2',
    ellipsis: true,
  },
];
    const columns_adress = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '街路巷',
    dataIndex: 'type',
    key: 'type',
    width: 80,
  },
  {
    title: '门牌号',
    dataIndex: 'state',
    key: 'state 1',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'state',
    key: 'state 2',
    ellipsis: true,
  },
];
const listData = [];
for (let i = 0; i < 3; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    title: `ant design vue part ${i}`,
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
};
const data = [
  {
    key: '1',
    time: '2021/03/17 00:38',
    type: '个人',
    state: '未审核',
    
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    time: 'Jim Green',
    type: 42,
    state: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    time: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
   {
    key: '3',
    time: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
   {
    key: '3',
    time: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
   {
    key: '3',
    time: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },

     {
    key: '3',
    name: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
     {
    key: '3',
    name: 'Joe Black',
    type: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
     {
    key: '3',
    name: 'Joe Black',
    age: 32,
    state: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  
];
    return {
      data,
      listData,
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 2,
      },
      actions: [
        { type: 'history', text: '2021/03/11',text_type:"发布时间：" },
        { type: 'file-done', text: '156',text_type:"阅读量：" },
        // { type: 'message', text: '2' },
      ],
      columns,
      columns_adress,
      
      chartOption: {}
    };
  },
  mounted() {
    //调用接口
    this.getChartData();
    this.interval = setInterval(() => {
      this.getChartData();
    }, 3000);
  },
  methods: {
     callback(key) {
      console.log(key);
    },
    getChartData() {
      // const url='https://randomuser.me'
      request({
        // url:"/api/dashboard/chart",
        url:'https://randomuser.me/api',
        method: "get",
        params: { }
      }).then(response => {
        this.chartOption = {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: response.data
            }
          ]
        };
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  components: {
    Chart
  }
};
</script>

<style scoped lang="less">
/deep/.ant-list-vertical .ant-list-item-extra{
  margin: 0;
}
/deep/.ant-tabs-bar{
  margin: 0 !important;
}
.content{
  display: flex;
  height: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.left{
  margin-right:8px;
  width: 50%;
  height: 100%;
}
.left_top{
  border-radius: 5px;
  background: #fff;
  height: auto;
  margin-bottom:16px;

}
.left_bottom{
  padding: 0 16px;
  border-radius: 5px;
  background: #fff;
  height: 50%;
}
.right{
  margin-left:8px;
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  >div{
    border-radius: 5px;
    background: #fff;
    flex: 1;
    width:100%;
  }
}
.title{
  color: #1890ff;
  text-shadow: 0 0 0.25px currentColor;
  position: relative;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 32px 0 0;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.message{
  width: 100%;
  padding:16px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items:center
}
.img{
  width: 10%;
  img{
    height: 56px;
    border-radius: 28px;
  }
}
.message_contents{
  width: 80%;
  .header{
    color: rgba(0, 0, 0, 0.85);
    font-weight: 800;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .message_content{
    font-weight: 500;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.reply{
  width: 10%;
}
.vigilantes{
  width: 100%;
  padding:8px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 80%;
}
.vigilantes_item{
  border-radius: 5px;
  border:dotted rgba(209, 207, 207, 0.83);
  // box-shadow: -2px 0 3px -1px green, //左边阴影
  //             0 -2px 3px -1px blue, //顶部阴影
  //             0 2px 3px -1px red, //底部阴影
  //             2px 0 3px -1px yellow; //右边阴影;
  flex: 1;
  display: flex;
  margin: 8px;
  flex-direction: column;
  .unit_jf{
    margin: 8px;
    flex: 1;
    font-weight: 800;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1px rgb(231, 231, 231);
    >div{
    }
  }
  .person_tel{
    margin: 8px;
    flex: 2;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    .img{
      flex: 1;
      background: gray;
      height: 56px;
      border-radius: 28px;
    }
    .person{
      margin-left: 8px;
      flex: 3;
    }
  }
  .vi_time{
    margin:0 8px;
    flex: 1;
    font-size: 12px;
    color:  rgb(167, 164, 164);
  }
  .vi_content{
    width: 90%;
    margin: 8px;
    padding: 8px;
    font-size: 13px;
    border-radius: 8px;
    margin: 8px;
    background: rgb(237, 234, 234);
    flex: 2;
    overflow: hidden;
    flex-wrap: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
